<template>
    <el-header class="topHeader">
        <div>
            智慧实验室后台管理系统
        </div>
        <div>
            <span style="line-height: 40px;">欢迎{{ user.username }}回来</span>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-avatar :size="40" :src="circleUrl" />
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{ user.role.roleName }}</el-dropdown-item>
                        <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useUserStore'
import { useRouterStore } from '@/stores/useRouterStore'

const { changeUser, user } = useUserStore()
const { changeRouter } = useRouterStore()
const router = useRouter()
const handleExit = () => {
    changeUser({})
    changeRouter(false)
    router.push("/login")
}

const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

</script>

<style lang="less" scoped>
.topHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0d4ea1;
    color: white;
}
</style>